<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<%@ include file="/commons/meta.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>初学者论坛，beginer</title>
<!-- Bootstrap -->
<link href="${ctx}/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="${ctx}/kindeditor/plugins/code/prettify.css" />
	<script charset="utf-8" src="${ctx}/kindeditor/kindeditor.js"></script>
	<script charset="utf-8" src="${ctx}/kindeditor/lang/zh_CN.js"></script>
	<script src="${ctx}/js/jquery.min.js"></script>
    <script type="text/javascript">
//初始化编辑器  K.create("#demoEditor" )  中demoEditor 为文本编辑器的id

	var editor;
	KindEditor.ready(function(K){
		editor = K.create("#demoEditor",{
			cssPath:'${ctx}/kindeditor/plugins/code/ke.css',
			uploadJson:'${ctx}/kindeditor/jsp/upload_json.jsp',
			fileManagerJson:'${ctx}/kindeditor/jsp/file_manager_json.jsp',
			allowFileManager:true,
			items : [
						'fontname', 'fontsize', '|', 'forecolor', 'code','hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons','source']
		});
		 prettyPrint();
	});
	

	
	function getHtmlNote(areaId){
		//获取html内容，areaId 为文本编辑的id
		editor.sync();
		var ht = document.getElementById(areaId).value;
		alert("获取内容1"+ht);
	}
//设置文本编辑器的内容
	function setHtmlNote(note){
		editor.html(note);
//editor　和初始化文本编辑器的名字相对应
	}

</script>
 
<style type="text/css">

.bs-callout {
	padding: 20px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px
}

.bs-callout h4 {
	margin-top: 0;
	margin-bottom: 5px
}

.bs-callout p:last-child {
	margin-bottom: 0
}

.bs-callout code {
	border-radius: 3px
}

.bs-callout+.bs-callout {
	margin-top: -5px
}

.bs-callout-danger {
	border-left-color: #d9534f
}

.bs-callout-danger h4 {
	color: #d9534f
}

.bs-callout-warning {
	border-left-color: #f0ad4e
}

.bs-callout-warning h4 {
	color: #f0ad4e
}

.bs-callout-info {
	border-left-color: #5bc0de
}

.bs-callout-info h4 {
	color: #5bc0de
}
.bs-docs-header {
	position: relative;
	padding: 30px 15px;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0,0,0,.1);
	background-color: #3071a9;
	background-repeat: repeat-x;
}

.bs-docs-header {
	margin-bottom: 40px;
	font-size: 20px
}

.bs-docs-header h1 {
	margin-top: 0;
	color: #fff;
}

.bs-docs-header p {
	margin-bottom: 0;
	font-weight: 300;
	line-height: 1.4;
}

.bs-docs-header .container {
	position: relative;
}
.container h1 {
	margin-top: 0;
	color: #fff;
	text-align: left;
	font-weight:bold;
}
.container p {
	text-align: left;
}
.bs-docs-footer {
	margin-top: 0;
	border-top: 0
}

.bs-docs-footer {
	padding-top: 40px;
	padding-bottom: 20px;
	color: #777;
	text-align: center;
	border-top: 1px solid #e5e5e5
}

.bs-docs-footer-links {
	padding-left: 0;
	margin-top: 20px;
	color: #999
}

.bs-docs-footer-links li {
	display: inline;
	padding: 0 2px
}

.bs-docs-footer-links li:first-child {
	padding-left: 0
}

@media (min-width:768px) {
	.bs-docs-footer p {
		margin-bottom: 0;
		text-align: center;
	}
}


</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body style="background-color: #f8f8f8;">
	<jsp:include  page="top.jsp"/>


 <div class="bs-docs-header" id="content"  style="margin-bottom:20px;">
      <div class="container">
        <h1>JAVA环境搭建</h1>
        <p>JAVA开发环境，JDK，Eclipse安装，配置，第一行代码，Hello World </p>
        
      </div>
    </div>
    
     
	
	<div class="container .col-xs-" >
		<div class="row" >
					<div class="col-md-8" >
							  <div class="panel panel-primary" style="margin-top:0;" >
							  	<div class="panel-body">
							       <h3 ><img src="images/yuan.gif"/>&nbsp;<img src="images/jian.gif"/>&nbsp;<img src="images/ding.gif"/> ${bcBlog.blog_title } </h3>
							       <hr style="border:none;border-top:2px solid blue; height:0;" />
    <p>${bcBlog.blog_content }
</p>
							       <p style="text-align: right;"><b>作者</b>(大牛人) &nbsp; | &nbsp;<b>阅读</b>(111)&nbsp;|&nbsp; <b>评论</b>(123) &nbsp;</p>
	<p style="text-align:center">
		<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off" style="border-radius: 0px;width:150px;height:40px;margin-bottom:10px;margin-right:20px;font-weight:bold;font-size:18px">
			  赞(${bcBlog.praise})
		</button>
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="border-radius: 0px;width:150px;height:40px;margin-bottom:10px;font-weight:bold;font-size:18px">
		  评论
		</button>
	</p>
</div>

	 </div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel"><b>新增评论</b></h4>
      </div>
      <div class="modal-body">
      
       	  <textarea id="demoEditor" name="content" style="width:100%;height:300px">
   	 
   	 	 </textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="saveInfo()">	保存</button>
      </div>
    </div>
  </div>
</div>



				  
  						<div class="bs-callout bs-callout-info" >
  						<h4>杨晓阳：</h4>
    <p>进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。
    </p>
							</div>	
							<div class="bs-callout bs-callout-info" >
							<h4>杨晓阳：</h4>
    <p>进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。
    </p>
							</div>
							<div class="bs-callout bs-callout-info" style="margin-bottom:0px;">
							<h4>杨晓阳：</h4>
    <p>@杨晓阳 进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。
    </p>
							</div>
						    
						    <div style="text-align:right;margin:0 auto;">
							<nav >
  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li  class="active"><a href="#" >1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</nav></div>
					</div>
					<div class="col-md-4">
						<div class="list-group">
							<a href="#" class="list-group-item active"> 相关课程 </a> <a href="#"
								class="list-group-item">JAVAWeb第六讲，JSP与Tomcat应用</a> <a href="#"
								class="list-group-item">JAVAWeb第五讲，HTML基本标签应用</a> <a href="#"
								class="list-group-item">Porta ac consectetur ac</a> <a href="#"
								class="list-group-item">第一讲：JAVA安装及环境搭建</a> <a href="#"
								class="list-group-item">Vestibulum at eros</a> 
							  <a href="#"	class="list-group-item">Vestibulum at eros</a> 
								 <a href="#"class="list-group-item">第一讲：JAVA安装及环境搭建</a> 
								 <a href="#"class="list-group-item">Vestibulum at eros</a> 
						</div>
						 <div class="list-group">
							<a href="#" class="list-group-item active"> 相关书籍 </a> <a href="#"
								class="list-group-item">JAVAWeb第六讲，JSP与Tomcat应用</a> <a href="#"
								class="list-group-item">JAVAWeb第五讲，HTML基本标签应用</a> <a href="#"
								class="list-group-item">Porta ac consectetur ac</a> <a href="#"
								class="list-group-item">第一讲：JAVA安装及环境搭建</a> <a href="#"
								class="list-group-item">Vestibulum at eros</a> 
								<a href="#" class="list-group-item">JAVAWeb第五讲，HTML基本标签应用</a>
								<a href="#" class="list-group-item">JAVAWeb第五讲，HTML基本标签应用</a>
								<a href="#" class="list-group-item">JAVAWeb第五讲，HTML基本标签应用</a>
						</div>
						 <div class="list-group">
							<a href="#" class="list-group-item active"> 相关demo </a> 
							<a href="#"	class="list-group-item">JAVAWeb第六讲，JSP与Tomcat应用</a> 
								<a href="#"	class="list-group-item">JAVAWeb第五讲，HTML基本标签应用</a> 
								<a href="#" class="list-group-item">Porta ac consectetur ac</a> 
								<a href="#"	class="list-group-item">第一讲：JAVA安装及环境搭建</a> 
								<a href="#"	class="list-group-item">Vestibulum at eros</a> 
								<a href="#" class="list-group-item">JAVAWeb第五讲，HTML基本标签应用</a>
								<a href="#"	class="list-group-item">Vestibulum at eros</a> 
								<a href="#" class="list-group-item">JAVAWeb第五讲，HTML基本标签应用</a>
						</div>
						
					</div>
			 </div>
			

	</div><jsp:include page="foot.jsp"></jsp:include>
 

	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="${ctx}/js/bootstrap.js"></script>
 	<script type="text/javascript" src="${ctx}/kindeditor/plugins/code/prettify.js"></script>
		<script>
		$(function(){ prettyPrint(); });
		 function saveInfo(){
			alert("保存评论");
			 $('#myModal').modal('hide');
		 }
		</script>
</body>
</html>
